<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>凯盛项目管理系统</title>
	<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap.min.js"></script>
</head>
<body class="body">
	
	<div class="navbar navbar-fixed-top">
		<div class="navbar-inner">
			<div class="container">
				<a class="brand" href="#">Kaishengit PMS</a>
			</div>
		</div>
	</div>
	
	
	<div class="container">
	  <div class="row">
		<div class="span3">
			<div style="padding: 8px 0;" class="well">
				<ul class="nav nav-list">
				  <li class="nav-header">新Apple总部项目</li>
				  <li class="divider"></li>
				  <li><a href="#"><i class="icon-home"></i>最新动态</a></li>
				  <li>
					<a href="#"><i class="icon-flag"></i>目标</a>
				  </li>
				  <li><a href="#"><i class="icon-folder-open"></i>资料库</a></li>
				  <li><a href="#"><i class="icon-file"></i>文件共享</a></li>
				  <li class="active"><a href="#"><i class="icon-white icon-user"></i>联系人</a></li>
				  <li><a href="#"><i class="icon-fire"></i>想法</a></li>
				  <li><a href="#"><i class="icon-warning-sign"></i>Bug</a></li>
				  <li><a href="#"><i class="icon-cog"></i>项目设置</a></li>
				</ul>
			</div>
		</div>
		<div class="span9">
			
			<ul class="breadcrumb" style="margin-bottom:0px;border-radius: 3px 3px 0 0">
				<li class="active">
					<a href="task.html"><i class="icon-user"></i>联系人</a>
				</li>
			</ul>
			<div class="wall">
				<div class="row">
					<div class="span3">
						<a href="new_contact.jspx" class="btn span2"><i class="icon-plus"></i>添加联系人</a>
						<div class="clear"></div>
						<ul class="unstyled" style="margin-top:15px">
						<c:choose>
							<c:when test="${!empty requestScope.contacts }">
								<c:forEach items="${requestScope.contacts }" var="contact">
								<li style="line-height:30px">
									<i class="icon-list-alt"></i><a class="ajax" href="javascript:;" id="${contact.id }">${contact.name }</a>
								</li>
								</c:forEach>
							</c:when>
							<c:otherwise>
								<li style="line-height:30px">
									<i class="icon-list-alt"></i>还没有创建联系人
								</li>
							</c:otherwise>
						</c:choose>
						</ul>
					</div>
					<div id="showJson" class="span5" style="min-height:400px;border-left:1px solid #ccc;padding-left:15px">
					<c:forEach items="${requestScope.contacts }" var="contact" begin="0" end="0">
						<address>
							<h3>${contact.name }</h3>
							<p>${contact.companyname}</p>
							<small>手机</small> ${contact.mobile }<br/>
							<small>固话</small> ${contact.tel }<br/><br/>
							<small>邮箱</small> ${contact.email }<br/>
							<small>地址</small> ${contact.address }<br/><br/>
							<small>主页</small> <a href="${contact.pageHome}">${contact.pageHome}</a><br/>
							<small>微博</small> 
							<a href="${contact.website }${contact.weibo}">@${contact.weibo}</a><br/>
						</address>
						<div class="line">记录</div>
						<c:forEach items="${requestScope.ctnList}" var="ctn">
							<blockquote>
								<blockquote>
							 		${ctn.content}
							 		 <small>${ctn.name }发表于${ctn.time }</small>
							  	</blockquote>
							</blockquote>
						</c:forEach>
						<form class="formContact" action="contactnote.jspx" method="get">
							<input type="hidden" value="${contact.id}" name="contactId"/>
							<input type="text" id="contactText" class="span4" autocomplete="off" name="contact"/><br/>
							<button type="button" class="btn btn-primary" id="contactbtn">发表消息</button>
						</form>
						<br/><br/><br/>
						<a class="btn btn-primary" href="edit.jspx?edit=${contact.id }"><i class="icon-pencil icon-white"></i>编辑</a>
						<a class="btn btn-danger" href="contact.jspx?del=${contact.id }" id="del"><i class="icon-trash icon-white"></i>删除</a>
					</c:forEach>	
					</div>
				</div>
			</div>
		</div>
	  </div>
	</div>
	<script type="text/template" id="template">
		<address>
		<h3>{{name}}</h3>
		<p>{{companyName}}</p>
		<small>手机</small> {{mobile}}<br/>
		<small>固话</small> {{tel}}<br/><br/>
		<small>邮箱</small> {{email}}<br/>
		<small>地址</small> {{address}}<br/><br/>
		<small>主页</small> <a href="{{pageHome}}">{{pageHome}}</a><br/>
		<small>微博</small> <a href="{{blog}}{{blogName}}">@{{blogName}}</a><br/>
	</address>
	<div class="line">记录</div>
	<blockquote>
	  {{content}}
	</blockquote>
	<form class="formContact" action="contactnote.jspx" method="get">
		<input type="hidden" value="{{contactId}}" name="contactId"/>
		<input type="text" id="contactText" autocomplete="off" name="contact"/><br/>
		<button class="btn btn-primary" type="button" id="contactbtn">发表消息</button>
	</form>
	<br/><br/><br/>
	<a class="btn btn-primary" href="edit.jspx?edit={{editId}}"><i class="icon-pencil icon-white"></i>编辑</a>
	<a class="btn btn-danger" id="del" href="contact.jspx?del={{contactId}}"><i class="icon-trash icon-white"></i>删除</a>
	</script>
	<script type="text/javascript">
		$(function(){
			$("#contactbtn").click(function(){
				if(!$("#contactText").val()){
					document.getElementById("contactText").focus();
				}else{
					$(".formContact").submit();
				}
			});
			$(".ajax").click(function(){
				var contactId=$(this).attr("id");
				$.post("contact.jspx",{"id":contactId},function(result){
					var template = $("#template").html();
					var block="";
					for(var i=0;i<result.cnList.length;i++){
						block=block+result.cnList[i].content+"<small>"+result.cnList[i].name+"发表于"+result.cnList[i].timeStamp+"</small>";
					}
					template = template.replace(/{{name}}/g,result.name).replace(/{{companyName}}/g,result.companyname).replace(/{{mobile}}/g,result.mobile).
					replace(/{{tel}}/g,result.tel).replace(/{{email}}/g,result.email).replace(/{{address}}/g,result.address).replace(/{{pageHome}}/g,result.pageHome).
					replace(/{{blog}}/g,result.website).replace(/{{blogName}}/g,result.weibo).replace(/{{contactId}}/g,result.id).replace(/{{editId}}/g,result.id).replace(/{{content}}/g,block);
					$("#showJson").html(template);
					$("#contactbtn").click(function(){
						if(!$("#contactText").val()){
							document.getElementById("contactText").focus();
						}else{
							$(".formContact").submit();
						}
					});
					$("#del").click(function(et){
						if(confirm("确定删除这条记录吗")){
							
						}else{
							et.preventDefault();
						}
					});
				});
			});
			$("#del").click(function(et){
				if(confirm("确定删除这条记录吗")){
					
				}else{
					et.preventDefault();
				}
			});
		});
	</script>
</body>
</html>